<template>
    <div class="left">
			<div class="myphoto"><img src="../assets/myphoto.png" alt=""></div>
			<ul>
				<li @click="rehome"> 
					<img src="../assets/ulone.png" alt="">
					<span>概况</span>
				</li>
				<li @click="getlistnum(1)">
					<img src="../assets/ultwo.png" alt="">
					<span>商品</span> 
				</li>
				<li @click="getlistnum(2)">
					<img class="morewith" src="../assets/ulthree.svg" alt="">
					<span>订单</span>
				</li>
				<li @click="getlistnum(3)">
					<img class="othersvg" src="../assets/ulfour.svg" alt="">
					<span>财务</span>
				</li>
				<li @click="getlistnum(4)">
					<img src="../assets/ulfive.svg" alt="">
					<span>客户</span>	
				</li>
				<li @click="getlistnum(5)">
					<img src="../assets/ulfive.svg" alt="">
					<span>设置</span>
				</li>
			</ul>
			<div class="classify" v-if="this.listnum>=1">
				<div class="smallshop" v-show="this.listnum==1">
					<div class="shopreturn">
						<span>商品管理</span>
						<img @click="dellistnum()" src="../assets/return.svg" alt="">
					</div>
					<ul class="shopul">
						<li @click="gonext('shoplib')">商品库</li>
						<li @click="gonext('intnetshop')">网店商品</li>
						<li @click="gonext('shopclassify')">商品分组</li>
					</ul>
				</div>
				<div class="smallorder" v-show="this.listnum==2">
					<div class="shopreturn">
						<span>订单管理</span>
						<img @click="dellistnum()" src="../assets/return.svg" alt="">
					</div>
					<ul class="shopul">
						<li @click="gonext('ordersearch')">订单查询</li>
						<li @click="gonext('waitforsend')">待发货</li>
						<li @click="gonext('comeself')">到店自提</li>
					</ul>
				</div>
				<div class="smallmoney" v-show="this.listnum==3">
					<div class="shopreturn">
						<span>财务管理</span>
						<img @click="dellistnum()" src="../assets/return.svg" alt="">
					</div>
					<ul class="shopul">
						<li @click="gonext('mymoney')">我的钱包</li>
						<li @click="gonext('moneydetail')">账户总览</li>
						<li>资金对账</li>
						<li @click="gonext('checkmoney')">对账单</li>
						<li @click="gonext('checkmoneydetail')">资金对账</li>
					</ul>
				</div>
				<div class="smallpeople" v-show="this.listnum==4">
					<div class="shopreturn">
						<span>客户管理</span>
						<img @click="dellistnum()" src="../assets/return.svg" alt="">
					</div>
					<ul class="shopul">
						<li @click="gonext('clientsearch')">客户查询</li>
						
					</ul>
				</div>
				<div class="smallset" v-show="this.listnum==5">
					<div class="shopreturn">
						<span>系统设置</span>
						<img @click="dellistnum()" src="../assets/return.svg" alt="">
					</div>
					<ul class="shopul">
						<li>店铺管理</li>
						<li>联系我们</li>
						<li>账号管理</li>
						<li>操作日志</li>
						<li>资料管理</li>
						<li>通知管理</li>
						<li>密码修改</li>
					</ul>
				</div>

			</div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            chart:null,
            listnum:0
        }
    },
    methods:{
        getlistnum(i){
            this.listnum=i
			this.$emit('sent-listnum', i);
          
        },
        dellistnum(){
            this.listnum=0
			this.$emit('clear-listnum', 0);
        },
        gonext(data){
            if(this.$route.name!=data){
				this.$router.push({name:data})
				
			}else{
				console.log('出错了');
				
			}
        },
		rehome(){
			if(this.$route.name!='home'){
				console.log('跳转到主页');
				
				this.$router.push({name:'home'})
				
			}else{
				console.log('已经在主页了');
				
			}
  		},
		
	}
}
</script>

<style>
*{
	padding: 0;
	margin: 0;
}
li{
	cursor: pointer;
}
.left{
	height: 100vh;
	width: 101px;
	background-color: rgb(0, 21, 41);	
}
ul{
	list-style: none;
	
}
.myphoto img{
    width: 48px;
    height: 48px;
	border-radius: 50%;
}
.myphoto{
	padding: 18px;
}
li img{
	height: 18px;
	margin-left: 13px;
	width: auto;
}
.right{
	transition:  all .8s;
}
.othersvg{
	width: 18px !important;
	height: auto;
}
li{
	display: flex;
	align-items: center;
	height: 44px;
}

li span{
	display: block;
	float: right;
	margin-left: 20px;
	font-size: 13px;
	color: rgb(228, 228, 228);
	font-weight: 400;
}
.morewith{
	padding-right: 2.5px;
	padding-left: 2.5px;
}
.righttop{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1260px;
    height: 36px;
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px;
}
.home{
	display: flex;
	margin: 0 auto;
	width: 1360px;
	margin: 0 auto;
}
.classify{
	z-index: 99;
	position: absolute;
	left: 142px;
	top: 0;
	width: 114px;
    height: 100vh;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
}
.shopreturn img{
	margin-left: 20px;
}
.shopreturn{
	height: 38px;
	line-height: 38px;
	border-bottom:1.5px solid #cfcfcf;
	font-size: 13px;
} 
.shopul li{
	padding-left: 19px;
	font-size: 13px;
}
.shopul{
	margin-top: 5px;
}
</style>